<template>
	<div class="layout-padding">
		<div class="relative escape" ref="domRef">
			<MapArea class="absolute w-full h-full" />
			<div class="escape_top" style="pointer-events: none">
				<el-tooltip content="全屏" placement="top">
					<el-button
						type="info"
						style="pointer-events: all"
						@click="toggleFullScreen"
						v-if="!isFullscreen"
						class="escape_top_fullScreen"
						icon="FullScreen"
						link
						>全屏</el-button
					>
				</el-tooltip>
				<div class="escape_top_title">{{ tenantName }}</div>
				<div class="escape_top_date">{{ formatDate(date, 'YYYY年mm月dd日 WWW HH:MM:SS') }}</div>
			</div>
			<div class="relative w-full escape_content" style="pointer-events: none">
				<div class="w-full h-full absolute z-[999]">
					<el-row :gutter="4" style="height: 100%">
						<el-col :span="6" style="height: 100%">
							<div class="escape_content_flex">
								<div class="flex flex-col mb-4 escape_content_flex_item">
									<div class="py-2 pl-2 font-semibold text-center">报警状态统计</div>
									<StatisticPie
										class="h-[calc(100%-40px)] py-1 px-4"
										:data="statisticData.alarm"
										seriesTitle="报警概况"
										:color="['#909399', '#E6A23C', '#67C23A']"
									/>
								</div>
								<div class="flex flex-col mb-4 escape_content_flex_item">
									<div class="py-2 pl-2 font-semibold text-center">设备状态统计</div>
									<StatisticPie
										class="h-[calc(100%-40px)] py-1 px-4"
										:data="statisticData.device"
										seriesTitle="设备个数"
										:color="['#409EFF', '#F56C6C']"
									/>
								</div>
								<div class="flex flex-col escape_content_flex_item">
									<div class="py-2 pl-2 font-semibold text-center">设备分组统计</div>
									<GroupStatistic class="h-[calc(100%-40px)] py-1 px-4" :data="deviceAreaSta" />
								</div>
							</div>
						</el-col>
						<el-col :span="12" style="height: 100%">
							<div class="escape_content_flex">
								<div class="flex-1" style="pointer-events: none"></div>
								<div class="item_bg h-[calc(33.33%-11px)] min-h-[calc(33.33%-11px)] mt-4" style="pointer-events: all">
									<div class="py-2 pl-2 font-semibold text-center">报警趋势曲线</div>
									<AlarmTrend class="h-[calc(100%-40px)] py-1 px-4" :data="alarmTrend" />
								</div>
							</div>
						</el-col>
						<el-col :span="6" style="height: 100%">
							<div class="escape_content_flex" style="pointer-events: all">
								<div class="flex flex-col overflow-hidden escape_content_flex_item">
									<div class="py-2 pl-2 font-semibold text-center">实时警报消息</div>
									<div class="px-4 py-1 h-[calc(100%-40px)] overflow-hidden">
										<AlarmList :list="alarmList" class="h-full" />
									</div>
								</div>
								<div class="item_bg h-[calc(33.33%-11px)] min-h-[calc(33.33%-11px)] mt-4" style="pointer-events: all">
									<div class="flex flex-col h-full">
										<div class="py-2 pl-2 font-semibold text-center">各分组报警统计</div>
										<GroupStatistic class="h-[calc(100%-40px)] py-1 px-4" :data="alarmDeviceAreaSta" color="#c23531" />
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="monitorScreen" lang="ts">
import { useFullscreen, tryOnUnmounted } from '@vueuse/core';
import { dict_device_status, dict_device_alarm } from './data';
import { formatDate } from '/@/utils/formatTime';
import { Session } from '/@/utils/storage';
import { useThemeConfig } from '/@/stores/themeConfig';
import { fetchList } from '/@/api/platform/alarmLogging';
import { onlineStatus } from '/@/api/platform/airMonitorEquipment';
import { alarmStatistics, equipmentGroupingStatistics, groupAlarmStatistics, alarmTrendCurve } from '/@/api/platform/largeScreen';
// 引入组件
import MapArea from './components/map.vue';
import AlarmList from './components/alarmList.vue';
import GroupStatistic from './components/groupStatistic.vue';
import AlarmTrend from './components/alarmTrend.vue';
import StatisticPie from './components/statistic.vue';
interface itemType {
	name: string;
	value: number;
}
const storesThemeConfig = useThemeConfig();
const deviceAreaSta = ref([]);
const alarmDeviceAreaSta = ref([]);
const alarmTrend = ref([]);
const { themeConfig } = storeToRefs(storesThemeConfig);
const domRef = ref();
const { toggle: toggleDom, isFullscreen } = useFullscreen(domRef);

const tenantName = computed(() => {
	return Session.getTenantName() || themeConfig.value.globalTitle;
});

const alarmList = ref([]);
const date = ref(new Date());
const statisticData = reactive<{ device: itemType[]; alarm: itemType[] }>({
	device: [],
	alarm: [],
});
const timer_date = ref();
const timer_data = ref();
onMounted(() => {
	timer_data.value = setInterval(() => {
		getData();
	}, 1000 * 60);
	timer_date.value = setInterval(() => {
		date.value = new Date();
	}, 1000);
});
function toggleFullScreen() {
	toggleDom();
}
tryOnUnmounted(() => {
	clearInterval(timer_date.value);
	clearInterval(timer_data.value);
});
const getAlarmList = async () => {
	const { data } = await fetchList({ descs: 'create_time' });
	alarmList.value = data.records;
};
// 设备在线状态统计
const getStatictis = () => {
	onlineStatus().then((res) => {
		statisticData.device = [];
		for (let i = 0; i < dict_device_status.length; i++) {
			statisticData.device.push({
				name: dict_device_status[i].cn,
				value: res.data[dict_device_status[i].en],
			});
		}
		// for (let k in res.data) {
		// 	const f = dict_device_status.find((d) => d.en === k);
		// 	if (f) {
		// 		statisticData.device.push({
		// 			name: f.cn,
		// 			value: res.data[k],
		// 		});
		// 	}
		// }
	});
};
// 报警统计
const getAlarmStatictis = () => {
	alarmStatistics().then((res) => {
		statisticData.alarm = [];

		for (let i = 0; i < dict_device_alarm.length; i++) {
			statisticData.alarm.push({
				name: dict_device_alarm[i].cn,
				value: res.data[dict_device_alarm[i].en],
			});
		}
		// for (let k in res.data) {
		// 	const a = dict_device_alarm.find((d) => d.en === k);
		// 	if (a) {
		// 		statisticData.alarm.push({
		// 			name: a.cn,
		// 			value: res.data[k],
		// 		});
		// 	}
		// }
	});
};
// 设备分组统计
const getEquipmentGroupingStatistics = async () => {
	const res = await equipmentGroupingStatistics();
	deviceAreaSta.value = res.data || [];
};
// 各分组报警统计
const getGroupAlarmStatistics = async () => {
	const res = await groupAlarmStatistics();
	alarmDeviceAreaSta.value = res.data || [];
};
// 报警趋势曲线
const getAlarmTrendCurve = async () => {
	const res = await alarmTrendCurve();
	alarmTrend.value = res.data || [];
};
const getData = () => {
	getAlarmList();
	getStatictis();
	getAlarmStatictis();
	getEquipmentGroupingStatistics();
	getGroupAlarmStatistics();
	getAlarmTrendCurve();
};
getData();
</script>
<style lang="scss" scoped>
div,
span {
	font-family: 'Microsoft YaHei', 'Times New Roman';
}
.escape {
	height: calc(100vh - 124px);
	padding-bottom: 8px;
	width: 100%;
	&_content {
		height: calc(100% - 60px);
		&_flex {
			height: 100%;
			color: #fff;
			padding-left: 6px;
			padding-right: 6px;
			display: flex;
			flex-direction: column;
			.item_bg {
				// border: 1px solid #fff;
				box-shadow: 0px 12px 32px 4px rgba(7, 78, 110, 0.6), 0px 8px 20px rgba(7, 78, 110, 0.6);
				background-color: rgba(0, 0, 255, 0.08);
				border-radius: 4px;
			}
			&_item {
				flex: 1;
				pointer-events: all;
				// border: 1px solid #fff;
				border-radius: 4px;
				background-color: rgba(0, 0, 255, 0.08);
				box-shadow: 0px 12px 32px 4px rgba(7, 78, 110, 0.6), 0px 8px 20px rgba(7, 78, 110, 0.6);
			}
		}
	}
	&_top {
		height: 60px;
		width: 100%;
		text-align: center;
		position: relative;
		&_title {
			font-size: 26px;
			line-height: 50px;
			color: #fff;
		}
		&_date {
			color: #fff;
			line-height: 40px;
			position: absolute;
			top: 0;
			right: 120px;
		}
		&_fullScreen {
			position: absolute;
			top: 6px;
			right: 10px;
		}
	}
}
</style>
